<template>
  <div class="home">
    <header>
      <el-badge :value="12" class="item">
        <el-button
          icon="el-icon-shopping-cart-full"
          size="small"
          @click="$router.push('/shopcar')"
        ></el-button>
      </el-badge>
    </header>
    <ul class="con">
      <li v-for="item in list" :key="item.spuInfo.spuId">
        <img :src="item.spuInfo.images" alt="" />
        <h5>{{ item.spuInfo.spuTitle }}</h5>
        <p>{{ item.spuInfo.spuSubTitle }}</p>
        <h6>{{ item.spuInfo.price }}</h6>
        <el-button type="primary" size="mini" @click="add(item.spuInfo)"
          >加入购物车</el-button
        >
        <el-button size="mini" @click="gotoDetail(item.spuInfo.spuId)"
          >查看详情</el-button
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    getList() {
      this.$axios.get("goodsList.json").then((res) => {
        console.log(res);
        this.list = res.data.data.list;
      });
    },
    add(val) {
      if (localStorage.getItem("token")) {
        this.$store.commit("add", val);
      } else {
        this.$message({
          type: "error", // success error warning
          message: "没有登陆不能添加购物车",
        });
      }
    },
    gotoDetail(id) {
      this.$router.push({ path: "/detail/" + id });
      // this.$router.push({ path: "/detail", query: { id: id } });
      // this.$router.push({ name: "detail", params: { id: id } });
    },
    //跳转详情页
  },
  created() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
header {
  height: 60px;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 40px;
  box-sizing: border-box;
}

.con {
  width: 1000px;
  margin: 50px auto;
  display: flex;
  flex-wrap: wrap;

  li {
    width: 20%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    img {
      width: 80%;
    }
    > h5,
    > p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
